<template>
  <div class="home">
    <div id="earth">

    </div>
  </div>
</template>

<script>
const world = require("../map/world");
export default {
  name: "Home",
  data() {
    return {
      mapChart: "",
      chart: ""
    };
  },
  methods: {
    initMap() {
      console.log(this.$echarts);
      const canvas = document.createElement("canvas");
      this.mapChart = this.$echarts.init(canvas, null, {
        width: 1024,
        height: 600
      });
      console.log("this.mapChart", this.mapChart);
      this.mapChart.setOption({
        backgroundColor: "#000000",
        geo: {
          z: 1,
          map: "world",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90]
          ], // 设置为一张完整经纬度的世界地图
          nameMap: {
            China: "中国" // 变成中文
          },
          label: {
            // show: true,
            color: "#DB7093"
          }
        }
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("earth"));
      this.initMap();
      const option = {
        backgroundColor: "",
        globe: {
          roam: false,
          baseTexture: this.mapChart,
          shading: "lambert"
        }
      };
      this.chart.setOption(option, true);
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  margin: 0 auto;
  margin-top: 200px;
  #earth {
    margin: 0 auto;
    width: 1000px;
    height: 600px;
    border: 1px solid red;
  }
}
</style>